/********CHARTE GRAPHIQUE**********
*    Bleue claire = #52A3CC 	  *
*    Bleue foncé  = #356ca3		  *
*    gris cobalt  = #666659       *
*    gris clair   =	#DADAD7       *
*    blanc        = #F0F0EF	      *
*    blanc gris   = #ECECEB	      *
**********************************/
/*************************HEAD**************************/
header
{
	width: 100%;
	height: 51px;
	background-image:url('../IMG/bar.png'); 
	background-position: left top;
	background-repeat: repeat-x;
	position: relative;
	
}


h1
{
	margin-top: 50px;
	left: 0;
	height : 20px;
	color:#525247;
	font-family:"Arial";
	position : center;
	
}

/****************************MENU********************************/

.menu, .menu ul /* Liste */    
{
        padding : 0; /* pas de marge intérieure */
        margin : 0; /* ni extérieure */
        list-style : none; /* on supprime le style par défaut de la liste */
        line-height : 21px; /* on définit une hauteur pour chaque élément */
        text-align : center; /* on centre le texte qui se trouve dans la liste */
		
	
}
 
.menu /* Ensemble du menu */
{
        font-weight : bold; /* on met le texte en gras */
        font-family : Arial; /* on utilise Arial, c'est plus beau <img src="../../bundles/tinymce/vendor/tiny_mce/plugins/emotions/img/hihi.png" title="^^" alt="^^"> */
        font-size : 12px; /* hauteur du texte : 12 pixels */
	margin-top:-13px;
	margin-left:8%;

}

.menu a /* Contenu des listes */
{
    display : block; /* on change le type d'élément, les liens deviennent des balises de type block */
    padding : 0; /* aucune marge intérieure */
    background: #DADAD7; 
    color : #666659   ; /* couleur du texte */
    text-decoration : none; /* on supprime le style par défaut des liens (la plupart du temps = souligné) */
    #width : 150px; /* largeur */
	margin-top:-1px;
	
	

}
.menu li /* Éléments des listes */     
{
        float : left;
        width : 150px;
       	
}

 
/* IE ne reconnaissant pas le sélecteur ">" */
html>body .menu li
{
        border-right: 1px solid transparent ; /* on met une bordure transparente à droite de chaque élément */
}



.menu ul li:first-child a:after{
    content: '';
    position: absolute;
    left: 30px;
    top: -8px;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 8px solid #DADAD7;
}

.menu ul li:first-child a:hover:after{
    border-bottom-color: #04acec;
}
 
 
.menu li ul /* Sous-listes */
{
    position: absolute; /* Position absolue */
    #width: 148px; /* Largeur des sous-listes */
    left: -999em; /* Hop, on envoie loin du champ de vision */
	
}
 
 
.menu li ul li /* Eléments de sous-listes */
{
        /* pour ie qui ne reconnaît pas "transparent" (comme précédemment) */
        border-top : 1px solid #fff; /* on met une bordure blanche en haut de chaque élément d'une sous-liste */
}
 
/* IE ne reconnaissant pas le sélecteur ">" */
html>body .menu li ul li               
{
        border-top : 1px solid transparent; /* on met une bordure transparente en haut de chaque élément */
}
 
.menu li ul ul
{
        margin    : -22px 0 0 144px ; /* On décale les sous-sous-listes pour qu'elles ne soient pas au dessus des sous-listes */
        /* pour IE qui ne reconnaît pas "transparent" (comme précédemment) */
        border-left     : 1px solid #fff ; /* Petite bordure à gauche pour ne pas coller ... */     
}
 
/* IE ne reconnaissant pas le sélecteur ">" ... je me répète ;-) */
html>body .menu li ul ul               
{
        border-left     : 1px solid transparent ; /* on met une bordure transparente sur la gauche de chaque élément */
}
.menu a:hover /* Lorsque la souris passe sur un des liens */   
{
        color: #ECECEB; 
		background: #0179A7;
        background: -moz-linear-gradient(#04acec,  #0179A7);
        background: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0179A7));
        background: -webkit-linear-gradient(#04acec,  #0179A7);
        background: -o-linear-gradient(#04acec,  #0179A7);
        background: -ms-linear-gradient(#04acec,  #0179A7);
        background: linear-gradient(#04acec,  #0186ba);
}
.menu li:hover ul ul, .menu li.sfhover ul ul /* Sous-sous-listes lorsque la souris passe sur un élément de liste */
{
        left: -999em; /* On expédie les sous-sous-listes hors du champ de vision */
}
 
.menu li:hover ul, .menu li li:hover ul, .menu li.sfhover ul, .menu li li.sfhover ul  /* Sous-listes lorsque la souris passe sur un élément de liste ET sous-sous-lites lorsque la souris passe sur un élément de sous-liste */
{
        left: auto; /* Repositionnement normal */
        min-height: 0; /* Corrige un bug sous IE */
		width:149px;
}

.atitre:active,.atitre:link,.atitre:visited,.atitre 
{
	color:#F0F0EF;
	margin-bottom:3px;
	background-color:#356ca3;
	#border-radius:1px 1px 0  0;
	border-bottom:solid 2px #356ca3;
	#position:static;
	background: #356ca3;
    background: -moz-linear-gradient(#306193, #356ca3);
    background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #356ca3),color-stop(1, #306193));
    background: -webkit-linear-gradient(#306193, #356ca3);
    background: -o-linear-gradient(#306193, #356ca3);
    background: -ms-linear-gradient(#306193, #356ca3);
    background: linear-gradient(#306193, #356ca3);      
    color : #DADAD7 ; /* couleur du texte */	
}

#menuUser
{
	margin-left:75%;
	margin-right:3px;
	position:absolute;
}
#deconnection
{
	color:#FF9933;
	background: #75756A;
    background: -moz-linear-gradient(#666659 , #75756A);
    background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #75756A),color-stop(1, #666659 ));
    background: -webkit-linear-gradient(#666659 , #75756A);
    background: -o-linear-gradient(#666659 , #75756A);
    background: -ms-linear-gradient(#666659 , #75756A);
    background: linear-gradient(#666659 , #75756A); 
}
/********************BOUTON CONNEXION ET INCRIPTION**************************/
.log 
{	
	list-style-type:none;
	margin-left: 75%;
	font-family:"Verdana";
	margin-top: -5px;
	text-decoration: none;
	position:absolute;
	
}
.log a
{
	text-decoration: none;
	padding:2px;
	border-radius:2px;
	
}
.log li
{
	float:right;
	width:100px;
	text-decoration: none;
	
}

#connexion:hover, #connexion a:hover
{
	background: -moz-linear-gradient(#04acec,  #0179A7);
    background: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0179A7));
    background: -webkit-linear-gradient(#04acec,  #0179A7);
    background: -o-linear-gradient(#04acec,  #0179A7);
    background: -ms-linear-gradient(#04acec,  #0179A7);
    background: linear-gradient(#04acec,  #0186ba);
}
#connexion, #connexion a
{
	color: #F0F0EF; 
    background: #356ca3;
    background: -moz-linear-gradient(#306193, #356ca3);
    background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #356ca3),color-stop(1, #306193));
    background: -webkit-linear-gradient(#306193, #356ca3);
    background: -o-linear-gradient(#306193, #356ca3);
    background: -ms-linear-gradient(#306193, #356ca3);
    background: linear-gradient(#306193, #356ca3); 
}

#inscription,#inscription a
{	
	background: #61BA44;
    background: -moz-linear-gradient(#65C565,  #61BA44);
    background: -webkit-gradient(linear, left top, left bottom, from(#65C565), to(#61BA44));
    background: -webkit-linear-gradient(#65C565,  #61BA44);
    background: -o-linear-gradient(#65C565,  #61BA44);
    background: -ms-linear-gradient(#65C565,  #61BA44);
    background: linear-gradient(#65C565,  #61BA44);  
	color:#F0F0EF;
}
#inscription:hover,#inscription a:hover
{	
    background: -moz-linear-gradient(#70DB70,  #6CCF4B);
    background: -webkit-gradient(linear, left top, left bottom, from(#70DB70), to(#6CCF4B));
    background: -webkit-linear-gradient(#70DB70,  #6CCF4B);
    background: -o-linear-gradient(#70DB70,  #6CCF4B);
    background: -ms-linear-gradient(#70DB70,  #6CCF4B);
    background: linear-gradient(#70DB70,  #6CCF4B);    

}
/*******************************************************************************/
#nomSite
{
	font-family:"Infinium";
	#position:absolute;
	#margin-left:42%;
}
#nomHead
{
	color:#356ca3;
	width:auto;
	margin-top:-4px;
	text-transform:uppercase;
}
#nomHead:hover
{
	color:#356ca3;
	margin-top:-4px;
	background-color:#DADAD7;
}
#roue 
{
	height:16px;
	width:16px;
	margin-left:-30px;
	margin-bottom:-2px;
	padding-right:10px;
	
}

#atitreL
{
	border-radius:3px 0 0 0;
	color:#F0F0EF;
	margin-bottom:3px;
	background-color:#356ca3;
	
}
#atitreR
{
	border-radius:0 3px  0 0;
	color:#F0F0EF;
	margin-bottom:3px;
	background-color:#356ca3;

}
#alog
{
	border-radius:3px 3px  0 0;
	text-transform:uppercase;
	color:#F0F0EF;
	margin-bottom:3px;
	background-color:#356ca3;
}
#logo
{
	position: absolute;
	float:left;
	margin-top: 3px;
	margin-left: 20px;
	width:40px;
	height:40px;
}

#Nom
{
	text-shadow: 2px 2px 5px gray;
	font-family:"Arial";
	text-align: center;
	color:#525247;
}
#et
{
	color:#356ca3;
	background-color: #ECECEB;
}

